<template>
  <div class="expand-menu__wrapper">
    <mt-palette-button content="+" @expand="main_log('expand')" @expanded="main_log('expanded')"
                       @collapse="main_log('collapse')"
                       direction="rt" class="pb" :radius="80" ref="target_1"
                       mainButtonStyle="color:#fff;background-color:#26a2ff;">
      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)"></div>
      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(2)"></div>
      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(3)"></div>
    </mt-palette-button>
  </div>
</template>

<script>
  export default {
    name: "expandMenu",
    data() {
      return {
      }
    },
    methods: {
      main_log(val) {
        console.log('main_log', val);
      },
      sub_log(val) {
        console.log('sub_log', val);
        this.$refs.target_1.collapse();
      }
    }
  }
</script>

<style scoped>
  .expand-menu__wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
</style>
